<!-- 分割线 -->
<!-- <script setup>
import { ref, reactive, computed } from 'vue'
let id = ref(1)
let todo = ref('')
let toggle = ref(true)
let todos = ref([
  { id: id.value++, text: 'first todo', isDelete: false },
  { id: id.value++, text: 'second todo', isDelete: true },
  { id: id.value++, text: 'thrid todo', isDelete: false },
])
function addToto() {
  todos.value.push({ id: id.value++, text: todo.value, isDelete: false })
  todo.value = ''
}
function removeTodo(item) {
  todos.value = todos.value.filter(todo => todo !== item);
}

let filterData = computed(() => { 
  return toggle.value ? todos.value : todos.value.filter(item => !item.isDelete)
})


</script>
<template>
  <form @submit.prevent="addToto">
    <input placeholder="new todo" required type="text" v-model="todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li :class="{ delete: item.isDelete }" v-for="item in filterData" :key="item.id">
      <input :id="'a'+item.id" type="checkbox" v-model="item.isDelete">
      <label :for="'a'+item.id">{{ item.text }}</label>
      <button @click="removeTodo(item)">Delete</button>
    </li>
  </ul>
  <button @click="toggle = !toggle">
    {{ toggle ? '隐藏删除' : '显示所有' }}
  </button>
</template>
<style scoped>
.delete {
  text-decoration: line-through;
}
</style>
 -->

<!-- 分割线 -->
<!-- <script setup>
import { ref, onMounted } from 'vue'
const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = 'Hello World Mounted'
})
</script>

<template>
  ref和js中的ref绑定，
    js中通过pElementRef.value类似getElementById获取到DOM节点
  <p ref="pElementRef">Hello</p>
</template> -->

<!-- 分割线 -->
<!-- <script setup>
import { ref, inject, watch } from 'vue'
let todoId = ref(1)
let isDisabled = ref(false)
let axios = inject('axios')
let data = ref('还没有数据...')
async function getData(newValue,oldValue) {
  console.log("新值：" + newValue)
  console.log("旧值：" + oldValue)
  isDisabled.value = true
  let res = await axios.get('/' + todoId.value)
  data.value = res.data
  isDisabled.value = false
  // .then(res => {
  //   isDisabled.value = false
  //   data.value = res.data
  // })
}
// 监听todoId的变化，每次变化都会执行getData函数
watch(todoId, getData)

</script>
<template>
  <div>Todo ID: {{ todoId }}</div>
  <div><button @click="todoId++" :disabled="isDisabled">获取下一个todo数据</button></div>
  <div>{{ data }}</div>
</template>

<style></style> -->
<!-- 分割线 -->
<script setup>
  import { ref } from 'vue'
  import Child from './Child.vue'
  let childMessage = ref('no child message yet')
  function giveChildCallMethod(message) {
    childMessage.value = message
  }
</script>
<template>
  <child></child>
  <child message="父传给子组件的内容"></child>
  <child @giveChildCall="giveChildCallMethod"></child>
  <div>{{ childMessage }}</div>
</template>
<style>
</style>